/*------------------------------------*\
    #TREE NAV
\*------------------------------------*/

/**
 * 1) A tree nav is a nested accordion-style navigation, similar
 *    to operating system file manager navigations 
 */
.c-tree-nav {
}

.c-tree-nav__link {
   display: flex;
   align-items: center;
   margin-bottom: 1.2rem;
   color: inherit;
   font-weight: $font-weight-bold;
   transition: color 0.2s ease;

   &:hover,
   &.is-active {
      color: $color-white;
   }

   &:focus {
      color: $color-white;
      @include focusInverted();
   }
}

.c-tree-nav__link--is-active {
   color: $color-white;
   font-weight: bold;
}

/**
 * Subnav 
 */
.c-tree-nav__subnav {
   padding-left: 1rem;
   border-left: 1px solid $color-gray-73;
   margin-bottom: 1rem;
   font-size: $font-size-med;
   display: none;

   .c-tree-nav__item.is-active & {
      display: block;
   }
}

.c-tree-nav__icon {
   transition: transform $anim-fade-quick $anim-ease;

   .c-tree-nav__item.is-active & {
      transform: rotate(180deg);
   }
}

.c-tree-nav__subnav-title {
   font-weight: bold;
   display: block;
   margin-bottom: 1rem;
}

.c-tree-nav__subnav-link {
   color: inherit;
   display: block;
   margin-bottom: 1rem;

   &:hover,
   &:focus,
   &.is-active {
      color: $color-white;
   }

   &:focus {
      @include focusInverted();
   }
}

.c-tree-nav__link--btn {
   background: transparent;
   border: 0;
   padding: 0;
   font-size: inherit;

   svg {
      fill: currentColor;
   }
}

.c-tree-nav__subnav-link--heading {
   font-weight: bold;
   color: $color-white;
}
